<template>
<div class="box">
  <div class="main">
      <div class="wrapper">
        <div class="w1">
          <div class="top">
            <div class="l">
              <img src="../../../public/img/Homes/indexZiqu.png" alt="" />
              <h2>门店自取</h2>
              <p>下单免排队</p>
            </div>
            <div class="r" @click="fn">
              <img src="../../../public/img/Homes/indexWaimai.png" alt="" />
              <h2>外卖</h2>
              <p>无接触配送，送喜到家</p>
            </div>
          </div>
          <div class="bot">
            <div class="bot-l">
              <img src="../../../public/img/Homes/indexPindan.jpg" alt="" />
              <h3>好友拼单</h3>
            </div>
            <div class="bot-r">拼单喝茶，分账更方便</div>
          </div>
        </div>
        <div class="w2">
          <ul>
            <li><img src="../../../public/img/Homes/index1.jpg" alt=""></li>
            <li><img src="../../../public/img/Homes/index2.png" alt=""></li>
            <li><img src="../../../public/img/Homes/index3.jpg" alt=""></li>
          </ul>
        </div>
        <div class="w3">
          <div class="w3-l">
            <h3>我的积分 ***</h3>
            <p>可兑换喜茶卷和周边商城吗</p>
          </div>
          <hr>
          <div class="w3-r">
            <span class="iconfont icon-saoyisao"></span>           
            <p>会员码</p>
          </div>
        </div>
      </div>
    </div>
</div>
</template>

<script>
export default {
  data() {
    return {
       name: "Main"
    }
  },
methods: {

   fn(url){this.$router.push(url)}

}
}

</script>

<style >
.main {
  width: 100%;
  height: 5.2rem;
  background: #eee;
  margin-bottom: 0.6rem;
}

.main .wrapper {
  width: 90%;
  height: 2.4rem;
  margin: auto;
}
.main .w1 {
  width: 100%;
  height: 2.4rem;
  background-color: #fff;
  border-radius: 0.1rem;
}
.main .wrapper .top {
  width: 100%;
  height: 1.6rem;
  padding-top: 0.24rem;
}
.main .wrapper .top .l {
  float: left;
  width: 49%;
  height: 1.5rem;
  border-right: 0.01rem solid #666;
}
.l img,
.r img {
  width: 0.75rem;
  height: 0.75rem;
  margin: auto;
  display: block;
}
.l h2,
.r h2 {
  width: 100%;
  height: 0.35rem;
  text-align: center;
  font-size: 0.22rem;
  font-weight: 500;
  margin: 0.1rem 0;
}
.l p,
.r p {
  width: 100%;
  height: 0.35rem;
  text-align: center;
  font-size: 0.12rem;
  color: #333;
}
.main .wrapper .top .r {
  float: right;
  width: 49%;
  height: 1.5rem;
}
.main .wrapper .bot {
  width: 100%;
  height: 0.5rem;
  display: flex;
  justify-content: space-around;
  border-top: 0.01rem solid #666;
}
.main .bot .bot-l {
  width: 40%;
  height: 100%;
}
.bot-l img {
  width: 0.2rem;
  height: 0.4rem;
  margin-top: 0.05rem;
  transform: translate(0.2rem, 0);
}
.bot-l h3 {
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 0.18rem;
  float: right;
}
.main .bot .bot-r {
  width: 40%;
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 0.12rem;
}
.w2{
  width: 100%;
  height:1.3rem ;
  margin: 0.2rem 0;
}
.w2 ul{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.w2 li{
  width: 28%;
  height: 1.3rem;
}
.w2 li img{
  width: 100%;
  height: 100%;
}
.w3{
 width: 100%;
 height: 0.8rem;
 display: flex;
 justify-content: space-between;
 padding-top: 0.1rem;
}
.w3-l{
  width: 75%;
 height: 100%;
}
.w3 hr{
  width: 0.01rem;
  height: 0.6rem;
}
.w3-r{
   width:  20%;
   height: 100%;
}
.w3 p{
  margin-top: 0.08rem;
}
</style>